<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<style type="text/css">
			.demo {
				background-color: pink;
			}

			.demo>div {
				background-color: royalblue;
				color: white;
				min-width: 100px;
				border: dashed 1px #eee;
			}

			#demo1 {
				display: flex;
			}

			#demo2 {
				display: flex;
				align-items: flex-start;
			}

			#demo3 {
				display: flex;
				align-items: flex-end;
			}

			#demo4 {
				display: flex;
				align-items: center;
			}

			#demo5 {
				display: flex;
			}

			#demo6 {
				display: flex;
				flex-direction: column;
				padding: 10px;
			}

			#demo7 {
				display: flex;
			}

			#demo8 {
				display: flex;
				justify-content: flex-end;
			}

			#demo9 {
				display: flex;
				justify-content: center;
			}

			#demo10 {
				display: flex;
				justify-content: space-around;
			}

			#demo11 {
				display: flex;
				justify-content: space-between;
			}

			#demo12 {
				display: flex;
				justify-content: space-evenly;
			}
		</style>
	</head>
	<body>
		<section>
			<h3>Flex 布局</h3>
			<p>Flex 是弹性盒子布局, 可以更好的对容器中的子元素进行排列、对齐、分配空间。</p>
			<p>为容器定义 display: flex 或 display: inline-flex 样式，可以为子元素应用Flex布局。</p>
		</section>
		<section>
			<h3>flex-direction: 布局方向</h3>
			<p>默认 column，从左到右</p>
			<p>row，从上往下</p>
		</section>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例: 默认左右方向 flex-direction: row </h3>
					<div id="demo5" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例: 上下方向 flex-direction: column </h3>
					<div id="demo6" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
		</div>
		<section>
			<h3>align-items: Y轴对齐方式</h3>
			<p>默认 flex-stretch，上下两端对齐</p>
			<p>center，居中对齐</p>
			<p>flex-start，顶部对齐</p>
			<p>flex-end，底部对齐</p>
		</section>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例: 默认两端对齐 display: flex; align-items: flex-stretch</h3>
					<div id="demo1" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例: 顶部对齐 align-items: flex-start </h3>
					<div id="demo2" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
		</div>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例: 底部对齐 align-items: flex-end </h3>
					<div id="demo3" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例: 垂直居中对齐 align-items: center </h3>
					<div id="demo4" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
		</div>
		<section>
			<h3>justify-content: X轴对齐方式</h3>
			<p>默认 flex-start，左端对齐</p>
			<p>center，居中对齐</p>
			<p>flex-start，顶部对齐</p>
			<p>flex-end，右端对齐</p>
		</section>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例: 左端对齐 justify-content: flex-start </h3>
					<div id="demo7" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例: 右端对齐 justify-content: flex-end </h3>
					<div id="demo8" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
		</div>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例: 居中对齐 justify-content: center </h3>
					<div id="demo9" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例: justify-content: space-around </h3>
					<div id="demo10" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
		</div>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例: justify-content: space-betwwen </h3>
					<div id="demo11" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例: justify-content: space-evenly </h3>
					<div id="demo12" class="demo">
						<div>
							<h4>元素1</h4>
							<p>段落1</p>
							<p>段落2</p>
						</div>
						<div>
							<h4>元素2</h4>
						</div>
						<div>
							<h4>元素3</h4>
							<p>段落1</p>
						</div>
						<div>
							<h4>元素4</h4>
							<p>段落1</p>
							<p>段落2</p>
							<p>段落3</p>
							<p>段落4</p>
						</div>
					</div>
				</section>
			</div>
		</div>
	</body>
</html>
